<template>
  <div class="page-wrap">
    <el-card shadow="never">
      <div class="toolbar">
        <el-select v-model="warehouse" placeholder="仓库" clearable class="w-200">
          <el-option v-for="w in warehouses" :key="w" :label="w" :value="w" />
        </el-select>
        <el-button @click="refresh">刷新</el-button>
      </div>

      <el-table :data="rows" border stripe>
        <el-table-column prop="code" label="编码" width="120" />
        <el-table-column prop="name" label="名称" min-width="160" />
        <el-table-column prop="warehouse" label="仓库" width="120" />
        <el-table-column prop="quantity" label="库存" width="100" />
        <el-table-column prop="days" label="最后更新(天)" width="140" />
        <el-table-column prop="bucket" label="老化区间" width="140" />
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useStockStore } from '@/stores/stock.js'
const stock = useStockStore()
const warehouse = ref('')
const rows = ref([])
const warehouses = computed(()=> Array.from(new Set(stock.stockList.map(x=>x.warehouse))).filter(Boolean))

onMounted(()=> { if(!stock.stockList.length) stock.initializeStock(); refresh() })

function bucketOf(days){
  if (days<=7) return '0-7天'
  if (days<=30) return '8-30天'
  if (days<=90) return '31-90天'
  if (days<=180) return '91-180天'
  return '180天+'
}

function refresh(){
  const today = new Date()
  rows.value = stock.stockList
    .filter(p => !warehouse.value || p.warehouse === warehouse.value)
    .map(p => {
      const last = new Date(p.lastUpdated)
      const days = Math.floor((today - last) / (1000*60*60*24))
      return { ...p, days, bucket: bucketOf(days) }
    })
}
</script>

<style scoped>
.page-wrap { padding: 16px; }
.toolbar { display: flex; gap: 12px; align-items: center; }
.w-200 { width: 200px; }
</style>


